<template>
    <div class="trade_records">
      <van-nav-bar
        title="卖出详情记录"
        left-arrow
        @click-left="$router.back()"
        left-text="返回"
      />

      <div v-if="recordList.length">

<!--        <van-dropdown-menu>-->
<!--          <van-dropdown-item v-model="value1" :options="option1" disabled />-->
<!--          <van-dropdown-item v-model="value2" :options="option2" />-->
<!--        </van-dropdown-menu>-->
        <van-cell>
          <van-row style="text-align: center; vertical-align: center" align="center" type="flex" justify="space-between">
            <van-col span="6">时间</van-col>
            <van-col span="6">每股股价(￥)</van-col>
            <van-col span="6">卖出数量</van-col>
            <van-col span="6">可卖出到账(￥)</van-col>
          </van-row>
        </van-cell>

        <van-cell  v-for="item in recordList" :key="item.id" style="font-size: 12px">
          <van-row gutter="20" type="flex" justify='space-around' style="text-align:center" align="center">
            <van-col span="6">{{item.createdate}}</van-col>
            <van-col span="6">{{ (item.price/1000).toFixed(3) }}</van-col>
            <van-col span="6">{{item.amount}}</van-col>
            <van-col span="6">{{(item.money / 1000).toFixed(3)}}</van-col>
          </van-row>
        </van-cell>

        <van-pagination
          v-model="pageIndex"
          style="margin-top: 3px"
          :total-items="totalRecord"
          :items-per-page="pageSize"
          force-ellipses
          @change="handleChange"
        />
      </div>

      <van-divider style="margin-top: 160px" v-else>暂无记录</van-divider>

    </div>
</template>

<script>
  export default {
    name: 'tradeRecords',
    data(){
      return {
        value1: 0,
        value2: 'all',
        option1: [
          { text: '筛选', value: 0 },
        ],
        option2: [
          { text: '总记录', value: 'all' },
          { text: '买入记录', value: 'buy' },
          { text: '卖出记录', value: 'sell' },
        ],
        recordList: [],
        pageIndex: 1,
        pageSize: 20,
        totalRecord: 0,
        stockId: '',
      }
    },

    created() {
      const stockId = JSON.parse(localStorage.getItem('stockItem')).id
      if (stockId){
        this.stockId = stockId
      }
    },

    mounted() {
      if (this.stockId){
        // 初始化
        const params = {
          id: this.stockId,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        }

        // 封装函数
        this._getTradeRecordList(params)
      }
    },

    methods: {
      _getTradeRecordList(params){
        this.$api.stock.reqSellRecordList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total || res.data.count || 0
          }
        })
      },

      handleChange(value) {
        const params = {
          id: this.stockId,
          pageIndex: value,
          pageSize: this.pageSize,
        };
        // 封装函数
        this._getTradeRecordList(params)
      },

    },


  }
</script>

<style scoped>

</style>
